<template>
  <div id="login" >
    <el-form v-model="loginForm"  label-width="80px" class="login-box wow bounceIn"  data-wow-duration ="2s" data-wow-delay ="0s"
             :style="loginStatus!='GO'?
             'backdrop-filter: blur(20px);transition: backdrop-filter 10s':
             'backdrop-filter: blur(0px);transition: backdrop-filter 3s'">
      <el-row>
        <h3 class="login-title">欢迎登录{{userInfo.userName?`,${userInfo.userName}`:'' }}</h3>

      </el-row>
      <el-row v-show="userInfo!=null&&userInfo.userAvatar!=null">
        <center><el-avatar :src="userInfo.userAvatar"  :key="userInfo.userAvatar" :size="100"></el-avatar></center>
        <br>
      </el-row>
      <el-row>
<!--            对el-col进行自适应居中 xs、sm、md、lg、xl-->
            <el-col :xs="spanView.xs" :sm="spanView.sm" :md="spanView.md" :lg="spanView.lg" :xl="spanView.xl">
            <el-form-item prop="userAccount">
              <span slot="label"  class="login-label">
                账号
              </span>
          <el-input type="text" v-model="loginForm.userAccount" placeholder="请输入账号" @change ="getLoginUserInfo"/>
        </el-form-item></el-col>
      </el-row>
      <el-row>
        <el-col :xs="spanView.xs" :sm="spanView.sm" :md="spanView.md" :lg="spanView.lg" :xl="spanView.xl">
          <el-form-item prop="passWord">
            <span slot="label"  class="login-label">
                密码
              </span>
            <el-input type="password" v-model="loginForm.passWord" placeholder="请输入密码" :show-password="true"/>
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-row>-->
<!--          <el-col :xs="spanView.xs" :sm="spanView.sm" :md="spanView.md" :lg="spanView.lg" :xl="spanView.xl">-->
<!--          <el-form-item prop="checkCode" v-if="useCheckCode">-->
<!--            <span slot="label"  class="login-label">-->
<!--                验证码-->
<!--              </span>-->
<!--            <el-input  v-model="loginForm.checkCode" placeholder="请输入图形验证码">-->
<!--              <span slot="append" style="padding: 0px;background-color: rgba(255, 255, 255, 0.22);border: 0px">-->
<!--                <el-image :src="checkCodeUrl" @click.native="getCheckCode" alt="" v-if="useCheckCode"  style="width: 80px;height: 40px" fit="fill">-->
<!--                </el-image>-->
<!--              </span>-->
<!--            </el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <el-row>
        <el-col :xs="spanView.xs" :sm="spanView.sm" :md="spanView.md" :lg="spanView.lg" :xl="spanView.xl">
        <el-form-item>
          <el-button type="info" @click="onSubmit" :icon="loginStatus=='GO'?'el-icon-d-arrow-right':'el-icon-loading'" rounds :disabled="loginStatus=='GO'?false:true">{{ loginStatus }}</el-button>
        </el-form-item>
        </el-col>
      </el-row>
      <globel-footer></globel-footer>
    </el-form>
  </div>
</template>

<script>

import GlobelFooter from "@/components/globelFooter";
import {userApi} from "@/core/request/api/UserApi";
import {loginForm} from "@/core/config/userVarConfig";
import SafeUtils from "@/core/utils/SafeUtils";
import {mapActions} from "vuex";
import {CheckCodeApi} from "@/core/request/api/CheckCodeApi";
import {baseAPI} from "@/core/config/ApiConfig";
// import Vue from "vue";

export default {
  name: "loginPage",
  components: {GlobelFooter},
  data() {
    return {
      spanView:{
        xs:{
          span:12,
          offset:6
        },
        sm:{
          span:12,
          offset:6
        },
        md:{
          span:12,
          offset:6
        },
        lg:{
          span:6,
          offset:9
        },
        xl:{
          span:6,
          offset:9
        }
      },
      loginStatus: 'GO',
      userInfo: {},
      loginForm: loginForm,
      useCheckCode:false,
      checkCodeUrl:null,
    }
  },
  methods: {
    ...mapActions['getUUIDputState','setToken'],
    getLoginUserInfo(){
      userApi.getUserVOByUserAccount(loginForm.userAccount).then(res=>{
          if (res.data&&!res.data.code&&res.data.data){
              this.userInfo=res.data.data
          }
          else {
            this.userInfo={}
          }
          }
      ).catch(()=>{
        this.userInfo={}
      })
    },
    getCheckCode(){
      loginForm.dateStamp=new Date().getTime()
      this.checkCodeUrl=`${baseAPI}${CheckCodeApi.imgcheckcodeTouch}`+loginForm.dateStamp
    },
    onSubmit() {
      this.loginStatus='waiting...'
      // get post update
      // alert(this.$store.state.user.uuid+" "+this.$store.state.uuid)
      var req={};
      var passWord = SafeUtils.AesEncrypt(loginForm.passWord, this.$store.state.user.hexMsg)
      // if (this.useCheckCode){
      //   req.checkCode=loginForm.checkCode
      //   req.dateStamp=loginForm.dateStamp
      // }
      req.passWord=passWord
      req.userName=loginForm.userAccount
      this.axios.post(userApi.sysLogin, req)
          .then(res => {  //lambda
            if (!res.data.code) {
              sessionStorage.setItem('loginStatus', JSON.stringify(res.data.data))
              // alert(sessionStorage.getItem('loginStatus'))
              // alert(res.headers.get("Token"))
              this.$store.state.user.token=res.headers.get("Token")
              // this.prototype.axios.defaults.headers.common['Authorization']=res.headers.get("Token");
              this.$message.success("登录成功")
              if (this.$route.query.redirect){
                this.$router
                    .push({path: this.$route.query.redirect})
              }
            }
            else if(res.data.code==40401||res.data.code==50001){
              this.useCheckCode =true
              this.loginStatus='GO'
              this.$message.warning(res.data.message)
              this.getCheckCode()
            }
            else {
              this.loginStatus='GO'
              this.$message.warning(res.data.message)
            }
          })
          .catch(()=>{
            this.loginStatus='GO'
          })
    },
    reg() {
      this.axios.get()
          .then(res => {
            if (!res.data.code) {
              this.$message.success(res.data.message)
            }
          })

    }
  },
  mounted() {

     new this.$wow.WOW().init()

    this.$store.dispatch('getUUIDputState');
    if (this.loginForm.userAccount){
      this.getLoginUserInfo(this.loginForm.userAccount)
    }
  }
}
</script>

<style scoped>
#login{
  background: url("~@/assets/bacgrond_img.jpg");
  height: 100vh;
  width: 100vw;
  /*background: no-repeat;*/
  background-size: 100% 100%;
  color:#ffff;
  background-attachment: fixed;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
}
.login-box {
    border: 0px solid #DCDFE6;
    width: 100%;
    height: 100%;
    padding: 20% 0px 0px 0px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #999090;
    background-color: rgba(255, 255, 255, 0.22);
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #ffffff;
}


/deep/.el-input .el-input__inner {
  color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.53);
  background-color: rgba(129, 129, 129, 0.39);
}

.el-button--info:focus, .el-button--info:hover {
  background: rgba(166, 169, 173, 0.55);
  border-color: rgba(166, 169, 173, 0.55);
  color: #FFF;
}
 .el-button--info {
   color: #FFF;
   background-color:  rgba(144, 147, 153, 0.55);
   border-color: rgba(144, 147, 153, 0.55);
 }
.el-button--info:focus {
  color: #FFF;
  background-color:  rgba(144, 147, 153, 1);
  border-color: rgba(144, 147, 153, 0.55);
}
.login-label{
  color: #ffffff;
}


</style>
